var option = {
  x:850,
  y:425,
  rotate:360,
  scale:1,
  rotate_mod:10,
  scale_mod:0.06,
  index:100,
  lengths:15,
  arr_len:arr.length,
  iftime:true
}
$(function(){
  arr.forEach(e => {
    $('.rotary_ul').append("<li style='background_color:"+e.background_color+"' class='rotary_li' id='rotary_li"+ e.id +"'>"+e.id+"<img src='"+e.img+"'></li>")
  });
  create(arr.filter(e=>e.ifcenter)[0].id)
})
var win_width
  size()
$(window).resize(function(){
  size()
  create(arr.filter(e=>e.ifcenter)[0].id)
})

function size(){
  win_width = $(window).width()
  option.x = (win_width-220)/2
}

function create(idxs){
  var idx =  idxs
  var lens = (option.lengths-1)/2
  var gap = option.arr_len - option.lengths
  if_center(idx)
  others(idx,lens,gap)
  add_css(idx,option.x,option.y,option.rotate,option.scale,option.index,'bottom')
  for(var i = 1;i<=lens;i++){
    create_right(idx+i>option.arr_len-1?(idx+i)-option.arr_len:idx+i,i)
    create_left(idx-i<0?option.arr_len+(idx-i):idx-i,i)
  }   
}

function create_right(sum,i){   
  var x = option.x*(1 + Math.sin(option.rotate_mod*i*Math.PI/180))
  var y = option.x*(1 - Math.cos(option.rotate_mod*i*Math.PI/180)) + option.y
  var scale = option.scale - option.scale_mod*i
  var rotate = option.rotate + option.rotate_mod*i
  var index = option.index - i
  add_css(sum,x,y,rotate,scale,index,'left')
}

function create_left(sum,i){
  var x = option.x*(1 - Math.sin(option.rotate_mod*i*Math.PI/180))
  var y = option.x*(1 - Math.cos(option.rotate_mod*i*Math.PI/180)) + option.y
  var scale = option.scale - option.scale_mod*i
  var rotate = option.rotate - option.rotate_mod*i
  var index = option.index - i
  add_css(sum,x,y,rotate,scale,index,'right')
}

function if_center(idx){
  arr.map(function(e){
    if(e.id == idx){
      e.ifcenter = true
    }else{
      e.ifcenter = false
    }
  })
}

function others(idx,lens,gap){
  if((idx+lens)>(option.arr_len-1)){
    var idx01 = (idx+lens)-option.arr_len
  }else{
    var idx01 = idx+lens
  }

  if((idx-lens)<0){
    var idx02 = option.arr_len + (idx-lens)
  }else{
    var idx02 = idx-lens
  }

  if((idx01-idx02)>=(option.lengths-1)){
    var z
    for(var k = (idx01+1);k>(option.arr_len-1)?(k-option.arr_len)<idx02:k<=(option.arr_len-1);k++){
      if(k>=option.arr_len){
        z = k - option.arr_len
      }else{
        z = k
      }
      others_css(z)
      // console.log(z)
    }
  }else{
    for(var k = idx01+1;k<idx02;k++){
      others_css(k)
      // console.log(k)
    }
  }
}

function others_css(idx){
  var x = '850px'
  var y = '1425px'
  $('.rotary_ul li').eq(idx).css({
    'transform':'translate3d('+x+','+y+',0) rotate(360deg) scale(1)',
    'z-index':-1,
    'opacity':'0',
    'transition': 'all 1s'
  })
}

function add_css(idx,x,y,rotate,scale,index,direction){
  var x = x + 'px'
  var y = y + 'px'
  var rotate = rotate + 'deg'
  $('.rotary_ul li').eq(idx).css({
    'transition': 'transform .8s',
    'transform':'translate3d('+x+','+y+',0) rotate('+rotate+') scale('+scale+')',
    'z-index':index,
    'background-color':arr[idx].background_color,
    'transform-origin':direction+' top',
    'opacity':'1'
  })
}

$('.prv').on('click',function(){
  var idx = arr.filter(e=>e.ifcenter)[0].id - 1
  var idxs
  if(option.iftime){
    if(idx < 0){
      idxs = option.arr_len + idx
    }else{
      idxs = idx
    }
    create(idxs)
    option.iftime = false
    setTimeout(function(){
      option.iftime = true
    },1000)
  }
})

$('.next').on('click',function(){
  var idx = arr.filter(e=>e.ifcenter)[0].id + 1
  var idxs
  if(option.iftime){
    if(idx > option.arr_len - 1){
      idxs = idx - option.arr_len
    }else{
      idxs = idx
    }
    create(idxs)
    option.iftime = false
    setTimeout(function(){
      option.iftime = true
    },800)
  }
})